<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="../../images/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>李双意的个人网站--Li Shuang Yi's Personal Website</title>
	<!--[if lt IE 9]>
	<script src="../../lib/html5shiv/html5shiv.clockjs"></script>
	<script src="../../lib/respond/respond.clockjs"></script>
	<![endif]-->
	<script src="../../lib/jquery/jquery.js"></script>

	<style>
		body {
			margin: 0;
			padding: 0;
			background: #080e24 url(./bg.jpg) repeat;
		}

		ul {
			width: 600px;
			height: 600px;
			margin: 40px auto;
			position: relative;
			list-style: none;
		}

		ul li {
			border: 2px solid #394057;
			position: absolute;
			left: 50%;
			top: 50%;
			border-radius: 50%;
			transform: translate(-50%, -50%);
			box-sizing: border-box;

			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-name: orbit;
		}

		ul li span {
			display: block;
			position: absolute;
			left: 0;
			width: 12px;
			height: 12px;
			border-radius: 50%;
		}

		ul li:nth-child(1) {
			width: 60px;
			height: 60px;
			border: none;
			box-shadow: 0 0 50px #c90;
			background-color: #C90;
			animation-duration: 5s;
		}

		ul li:nth-child(2) {
			width: 120px;
			height: 120px;
			animation-duration: 6s;
		}

		ul li:nth-child(2) span {
			background-color: yellow;
			left: 80px;
			top: 0;
		}

		ul li:nth-child(3) {
			width: 180px;
			height: 180px;
			animation-duration: 10s;
		}

		ul li:nth-child(3) span {
			background-color: blue;
			left: 47px;
			top: 0;
		}

		ul li:nth-child(4) {
			width: 240px;
			height: 240px;
			animation-duration: 12s;
		}

		ul li:nth-child(4) > span {
			background-color: green;
			left: 209px;
			top: 43px;
			animation: orbit 2s infinite linear;
		}

		ul li:nth-child(4) > span span {
			width: 6px;
			height: 6px;
			left: 16px;
			background-color: yellow;
		}

		ul li:nth-child(5) {
			width: 300px;
			height: 300px;
			background-image: url(./asteroids_meteorids.png);
			background-size: cover;
			animation-duration: 25s;
		}

		ul li:nth-child(5) span {
			background-color: red;
			left: 95px;
			top: 0;
		}

		ul li:nth-child(6) {
			width: 360px;
			height: 360px;
			animation-duration: 20s;
		}

		ul li:nth-child(6) span {
			background-color: #CCC;
			left: -5px;
			top: 200px;
		}

		ul li:nth-child(7) {
			width: 420px;
			height: 420px;
			animation-duration: 30s;
		}

		ul li:nth-child(7) > span {
			background-color: green;
			left: 300px;
			top: 18px;
		}

		ul li:nth-child(7) > span span {
			width: 15px;
			height: 15px;
			border: 2px solid #CCC;
			left: -4px;
			top: -4px;
			transform: skew(0deg,45deg);
		}

		ul li:nth-child(8) {
			width: 480px;
			height: 480px;
			animation-duration: 35s;
		}

		ul li:nth-child(8) span {
			background-color: pink;
			left: 0;
			top: 170px;
		}

		ul li:nth-child(9) {
			width: 540px;
			height: 540px;
			animation-duration: 40s;
		}

		ul li:nth-child(9) span {
			background-color: blue;
			left: 47px;
			top: 100px;
		}

		ul li:nth-child(10) {
			width: 600px;
			height: 600px;
			animation-duration: 45s;
		}

		ul li:nth-child(10) span {
			background-color: yellow;
			left: 224px;
			top: 0;
		}

		@keyframes orbit {
			0% {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			100% {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}


		label {
			width: 40px;
			display: inline-block;
			color: #f8f8f8;
		}

		 span {
			color: red;
		}
		p {
			color: #f8f8f8;
		}
		.container {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -262px;
			margin-top: -332px;
			width: 400px;
			padding: 50px;
			padding-right: 70px;
			line-height: 40px;
			border: 1px solid #999;
			background: rgba(0,0,0,.5);
		}

		textarea,input {
			background-color: rgba(0,0,0,.6);
			color: #f0ad4e;
		}
		 span {
			margin-left: 30px;
			font-size: 12px;
		}

		.wrong {
			color: red
		}

		.right {
			color: green;
		}

		.defau {
			width: 200px;
			height: 20px;
		}

		.de1 {
			background-position: 0 -20px;
		}

	</style>
</head>
<body>
	<div>
		<ul>
			<li></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span><span></span></span></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span><span></span></span></li>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
		</ul>
	</div>



	<div class="container" id="container">
		<label>姓名</label><input type="text" id="inp5"><span></span><br/>
		<label>手机</label><input type="text" id="inp2"><span></span><br/>
		<label>邮箱</label><input type="text" id="inp3"><span></span><br/>
		<p>我要留言：</p>
		<textarea name="" id="txt" cols="60" rows="19"></textarea>
		<button type="button" name="button" value="button" id="button">留言</button>
	</div>
	<script>

		var container = document.getElementById("container");
		var inpQQ = document.getElementById("inp1");
		var inpMobile = document.getElementById("inp2");
		var inpEmail = document.getElementById("inp3");
		var inpTel = document.getElementById("inp4");
		var inpName = document.getElementById("inp5");
		var inputs = container.getElementsByTagName("input");
		var arr = [inpQQ, inpMobile, inpEmail, inpTel, inpName];
		//5到11位，第一位不为0
		var regQQ = /^[1-9]\d{4,10}$/;
		//手机 11位 有号段 13[0-9] 14[57] 15[0-9] 17[0-9] 18[0-9]

		var regMobile = /^(13[0-9]|14[57]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
		//barack-hussein-obama@white-house.gov.us

		var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

		var regTel = /^0\d{2,3}-\d{7,8}$/;
		var regName = /^[\u4e00-\u9fa5]{2,}$/;
		regExp(inpMobile, regMobile);
		regExp(inpEmail, regEmail);
		regExp(inpName, regName);


		for (var i = 0; i < inputs.length; i++) {
			inputs[i].index = i;
			var index = inputs[i].index
			inputs[i].onkeyup = function (e) {
				//console.log(this.message);
				if (e.keyCode === 13) {
					if (this.message <inputs.length-1) {
						//console.log(arr[this.message + 1]);
						arr[this.message + 1].focus();
					}
				}
			};
		}

		function regExp(inp, reg) {
			inp.onblur = function () {
				if (reg.test(this.value)) {
					this.nextElementSibling.innerHTML = "输入正确";
					this.nextElementSibling.className = "right";
				} else {
					this.nextElementSibling.innerHTML = "输入错误";
					this.nextElementSibling.className = "wrong";
				}
				if (trim(this.value) === "") {
					this.nextElementSibling.innerHTML = "输入不能为空";
					this.nextElementSibling.className = "wrong";
				}
			};
		}
		function trim(str) {
			return str.replace(/^\s+|\s+$/g, "");
		}

	</script>

	<script>
		$(function(){
			$("#button").on("click",function () {
				var name = $("#inp5").val();
				var phone = $("#inp2").val();
				var email = $("#inp3").val();
				var message = $("#txt").val();
				var button = $("#button").val();
				/* console.log(name);
				 console.log(phone);
				 console.log(email);
				 console.log(message);
				 console.log($("#button").val());*/

				$.ajax({
					url:"message.php",
					type:"post",
					dataType: "json",
					data:{
						name:name,
						phone:phone,
						email:email,
						message:message,
						button:button
					},
					beforeSend:function(){

					},
					success:function(data){
//						console.log(data);
//						console.log(1);
						 $("#inp5").val("");
						 $("#inp2").val("");
						 $("#inp3").val("");
						 $("#txt").val("");
						alert('感谢您能给我留言！有问题我会尽快回复您！');



					},
					error:function(data){
						console.log(data);
//						console.log(0);
					}
				});

			});
		})
	</script>
</body>
</html>